<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/my.css" rel="stylesheet" />
		<style>
			h5 {
			margin: 5px 7px;
		}
	</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav bc2">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">搜索</h1>
		</header>
		<div class="mui-content bc">
			<div class="mui-content-padded" style="margin: 8%;">
				<div class="mui-input-row mui-search">
					<input type="search" class="mui-input-clear" placeholder="开启精彩阅读时光" onkeydown="search();" id="key">
				</div>
				<div id="top">
					<span style="color: #555;">大家都在搜</span><br>
					<button type="button" class="mui-btn mui-btn-outlined book" style="margin-top: 10px;margin-right: 5px;" id="6828">全球高武</button>
					<button type="button" class="mui-btn mui-btn-outlined book" style="margin-top: 10px;margin-right: 5px;" id="16265">第一序列</button>
					<button type="button" class="mui-btn mui-btn-outlined book" style="margin-top: 10px;margin-right: 5px;" id="24499">花掉1000000亿</button>
					<button type="button" class="mui-btn mui-btn-outlined book" style="margin-top: 10px;margin-right: 5px;" id="6938">修真聊天群</button>
					<button type="button" class="mui-btn mui-btn-outlined book" style="margin-top: 10px;margin-right: 5px;" id="16269">大王饶命</button>
					<button type="button" class="mui-btn mui-btn-outlined book" style="margin-top: 10px;margin-right: 5px;" id="24504">当医生开了外挂</button>
				</div>
			</div>
			<div id="text" style="display: none;">
				<div class="mui-card" style="margin: 8%;">
					<ul class="mui-table-view bc2" id="dataList">
						<li class="mui-table-view-divider">搜索结果</li>
					</ul>
				</div>
				<!-- <div align="center" style="font-size: 0.8125rem;">
					<a href="javascript:;" id="netSearch">没有找到想要的？点我试试动态搜索</a>
				</div> -->
			</div>
		</div>
	</body>
	<script src="js/config.js"></script>
	<script src="js/book.js"></script>
	<script src="js/mui.min.js"></script>
	<script type="text/javascript" charset="utf-8">
		var key;
		mui.init();
		mui.plusReady(function() {
			document.body.querySelector("#key").focus();
			mui.ajax(config.config.path + "/book/page?page=1&limit=6" + "&sort=desc&sort_column=click_num", {
					type: "GET",
					dataType: "json",
					success: function(result) {
						var code = result.code;
						if (code == 200) {
							var ele = document.getElementById("top");
							var top = '<span style="color: #555;">大家都在搜</span><br>';
							var data = "";
							for (j = 0, len = result.data.records.length; j < len; j++) {
								data = data + ' <button type="button" class="mui-btn mui-btn-outlined book" style="margin-top: 10px;margin-right: 5px;" id="' + result.data.records[j].id + '">' +
									result.data.records[j].name + '</button>';
							}
							topList = top + data;
							ele.innerHTML = topList;
						}
					}
				});
		});

		function search() {
			if (event.keyCode == 13) {
				var key = document.getElementById("key").value;
				if (key == "") return;
				plus.nativeUI.showWaiting();
				mui.ajax(config.config.path + "/book/search?key=" + key, {
					type: "GET",
					dataType: "json",
					success: function(result) {
						plus.nativeUI.closeWaiting();
						document.getElementById("key").blur();
						document.getElementById("text").style.display = 'block';
						var code = result.code;
						if (code == 204) {
							var ele = document.getElementById("dataList");
							var top = '<li class="mui-table-view-divider">搜索结果，共0条相关记录</li>';
							ele.innerHTML = top;
							mui.toast('未找到相关信息', {
								duration: 'short',
								type: 'div'
							})
						} else if (code == 400) {
							var ele = document.getElementById("dataList");
							var top = '<li class="mui-table-view-divider">搜索结果，共0条相关记录</li>';
							ele.innerHTML = top;
							mui.toast('未找到相关信息', {
								duration: 'short',
								type: 'div'
							})
						} else if (code == 200) {
							var ele = document.getElementById("dataList");
							var top = '<li class="mui-table-view-divider">搜索结果，共' + result.data.length + '条相关记录</li>';
							var data = "";
							for (j = 0, len = result.data.length; j < len; j++) {
								var title = result.data[j].name.replace(new RegExp(key, 'g'), '<font color="red">' + key + '</font>');
								var author = result.data[j].author.replace(new RegExp(key, 'g'), '<font color="red">' + key + '</font>');
								data = data + ' <li class="mui-table-view-cell bc2" id="' + result.data[j].id  + '">' + title + '<span class="mui-badge">' + author + '</span></li>';
							}
							ele.innerHTML = top + data; 
						}
					},
					error:function(err){
						plus.nativeUI.closeWaiting();
						mui.toast('搜索失败，请稍后重试', {
							duration: 'short',
							type: 'div'
						})
					}
				});
			}
		}

		// document.getElementById("netSearch").addEventListener('tap', function() {
		// 	mui.openWindow({
		// 		url: "result2.html",
		// 		id: "result2.html",
		// 		extras: { //自定义扩展参数，可以用来处理页面间传值

		// 		},
		// 		createNew: false, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
		// 		show: {
		// 			autoShow: true //页面loaded事件发生后自动显示，默认为true/页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
		// 		},
		// 		waiting: {
		// 			autoShow: true, //自动显示等待框，默认为true
		// 			title: '正在加载...' //等待对话框上显示的提示内容
		// 		}
		// 	});
		// });
		
		mui("#top").on('tap', '.book', function() {
			document.getElementById("key").blur();
			//获取id
			var id = this.getAttribute("id");
			//传值给详情页面，通知加载新数据
			book(id);
		});
		
		mui("#dataList").on('tap', '.mui-table-view-cell', function() {
			document.getElementById("key").blur();
			//获取id
			var id = this.getAttribute("id");
			//传值给详情页面，通知加载新数据
			book(id);
		});
	</script>
</html>
